<template>
  <div>
    <div class="help_div" v-show="visible1">
      <div class="save_button" style="margin-bottom:20px">
        <el-button type="primary" size="small" @click="addHelp()">添加</el-button>
      </div>
      <div style="width:800px">
        <el-table :data="helpList">
          <el-table-column label="ID" width="50px">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column label="问题" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <div>
                <el-link icon="el-icon-edit" @click="editHelp(scope.row)">编辑</el-link>
                <el-link icon="el-icon-view" @click="query(scope.row.id)">查看</el-link>
              </div>
              <div>
                <el-link icon="el-icon-delete" @click="deleteHelp(scope.row.id)">删除</el-link>
                <el-link
                  v-if="scope.row.showStatus==0"
                  icon="el-icon-check"
                  @click="updateStatus(scope.row.id)"
                >隐藏</el-link>
                <el-link
                  v-if="scope.row.showStatus==1"
                  icon="el-icon-close"
                  @click="updateStatus(scope.row.id)"
                >展示</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog :title="title" :visible.sync="visible" width="450px">
        <el-form :model="helpForm" :rules="rules" ref="helpForm">
          <el-form-item label="问题" prop="title">
            <el-input
              type="textarea"
              placeholder="输入标题"
              rows="5"
              v-model="helpForm.title"
              style="width:350px"
            />
          </el-form-item>
          <el-form-item label="排序" prop="orderBy">
            <el-input placeholder="输入排序" v-model.number="helpForm.orderBy" style="width:50px" />
          </el-form-item>
          <el-form-item label="显示" prop="showStatus">
            <el-switch
              v-model="helpForm.showStatus"
              :active-value="active"
              :inactive-value="inactive"
            ></el-switch>
          </el-form-item>
        </el-form>
        <div class="save_button">
          <el-button type="primary" size="small" @click="save">保存</el-button>
        </div>
      </el-dialog>
    </div>

    <div class="help_div" v-show="visible2">
      <div
        class="save_button"
        style="margin-bottom:20px;justify-content:space-between;align-items:center"
      >
        <i class="el-icon-back" style="font-size:25px;color:#555555" @click="back"></i>
        <el-button type="primary" size="small" @click="addHelpContent()">添加</el-button>
      </div>
      <div style="width:800px">
        <el-table :data="contentList">
          <el-table-column label="ID" width="50px">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column label="方案" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.content}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template slot-scope="scope">
              <div>
                <el-link icon="el-icon-edit" @click="editHelpContent(scope.row)">编辑</el-link>
                <el-link icon="el-icon-delete" @click="deleteHelpContent(scope.row.id)">删除</el-link>
              </div>
              <div>
                <el-link
                  v-if="scope.row.showStatus==0"
                  icon="el-icon-check"
                  @click="updateContentStatus(scope.row.id)"
                >隐藏</el-link>
                <el-link
                  v-if="scope.row.showStatus==1"
                  icon="el-icon-close"
                  @click="updateContentStatus(scope.row.id)"
                >展示</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog :title="title1" :visible.sync="visible3" width="450px">
        <el-form :model="helpContentForm" :rules="contentRules" ref="helpContentForm">
          <el-form-item label="问题" prop="title">
            <el-input
              type="textarea"
              placeholder="输入方案"
              rows="5"
              v-model="helpContentForm.content"
              style="width:350px"
            />
          </el-form-item>
          <el-form-item label="排序" prop="orderBy">
            <el-input
              placeholder="输入排序"
              v-model.number="helpContentForm.orderBy"
              style="width:50px"
            />
          </el-form-item>
          <el-form-item label="显示" prop="showStatus">
            <el-switch
              v-model="helpContentForm.showStatus"
              :active-value="active"
              :inactive-value="inactive"
            ></el-switch>
          </el-form-item>
        </el-form>
        <div class="save_button">
          <el-button type="primary" size="small" @click="saveContent">保存</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  listHelp,
  addHelp,
  updateStatusHelp,
  deleteHelp,
  listHelpContent,
  deleteHelpContent,
  updateStatusHelpContent,
  addHelpContent
} from "../../../api/help.js";
export default {
  data() {
    return {
      helpId: null,
      visible1: true,
      visible2: false,
      title: "添加",
      title1: "添加",
      inactive: 1,
      active: 0,
      helpList: [],
      contentList: [],
      visible: false,
      visible3: false,
      helpForm: {
        id: null,
        title: "",
        showStatus: 0,
        orderBy: 0
      },
      helpContentForm: {
        id: null,
        content: "",
        showStatus: 0,
        orderBy: 0
      },
      contentRules: {
        content: [{ required: true, message: "输入问题", trigger: "blur" }],
        showStatus: [{ required: true, message: "请选择", trigger: "change" }],
        orderBy: [
          {
            type: "number",
            required: true,
            message: "输入排序",
            trigger: "blur"
          }
        ]
      },
      rules: {
        title: [{ required: true, message: "输入问题", trigger: "blur" }],
        showStatus: [{ required: true, message: "请选择", trigger: "change" }],
        orderBy: [
          {
            type: "number",
            required: true,
            message: "输入排序",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    restContentForm() {
      this.helpContentForm = {
        id: null,
        content: "",
        showStatus: 0,
        orderBy: 0
      };
    },
    addHelpContent() {
      this.title1 = "添加";
      this.restContentForm();
      this.visible3 = true;
    },
    editHelpContent(data) {
      this.title1 = "编辑";
      this.visible3 = true;
      this.helpContentForm = data;
    },
    deleteHelpContent(id) {
      deleteHelpContent(id).then(res => {
        this.initContentData();
      });
    },

    updateContentStatus(id) {
      updateStatusHelpContent(id).then(res => {
        this.initContentData();
      });
    },
    saveContent() {
      this.$refs["helpContentForm"].validate(valid => {
        if (valid) {
          addHelpContent(
            this.helpContentForm.id,
            (this.helpId = this.helpId),
            this.helpContentForm.content,
            this.helpContentForm.orderBy,
            this.helpContentForm.showStatus
          ).then(res => {
            this.$message({
              type: "success",
              message: "保存成功"
            });
            this.restContentForm();
            this.visible3 = false;
            this.initContentData();
          });
        }
      });
    },

    back() {
      this.visible1 = true;
      this.visible2 = false;
    },
    initContentData() {
      listHelpContent(this.helpId, null).then(res => {
        this.contentList = res.data;
      });
    },
    query(id) {
      this.visible1 = false;
      this.visible2 = true;
      this.helpId = id;
      this.initContentData();
    },
    restForm() {
      this.helpForm = {
        id: null,
        title: "",
        showStatus: 0,
        orderBy: 0
      };
    },
    addHelp() {
      this.title = "添加";
      this.restForm();
      this.visible = true;
    },
    editHelp(data) {
      this.title = "编辑";
      this.visible = true;
      this.helpForm = data;
    },
    deleteHelp(id) {
      deleteHelp(id).then(res => {
        this.initData();
      });
    },
    initData() {
      listHelp(null).then(res => {
        this.helpList = res.data;
      });
    },
    updateStatus(id) {
      updateStatusHelp(id).then(res => {
        this.initData();
      });
    },
    save() {
      this.$refs["helpForm"].validate(valid => {
        if (valid) {
          addHelp(
            this.helpForm.id,
            this.helpForm.title,
            this.helpForm.orderBy,
            this.helpForm.showStatus
          ).then(res => {
            this.$message({
              type: "success",
              message: "保存成功"
            });
            this.restForm();
            this.visible = false;
            this.initData();
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.save_button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.help_div {
  width: 800px;
  margin: 0 auto;
}
</style>